<script setup>
import { ref, computed } from 'vue'

const query = ref('')
const role = ref('')

const allUsers = ref([
  { id: 1, name: 'Alice', email: 'alice@example.com', role: 'admin', status: 'active' },
  { id: 2, name: 'Bob', email: 'bob@example.com', role: 'editor', status: 'disabled' },
  { id: 3, name: 'Cathy', email: 'cathy@example.com', role: 'viewer', status: 'active' },
])

const users = computed(()=> allUsers.value.filter(u =>
  (!query.value || u.name.toLowerCase().includes(query.value.toLowerCase()) || u.email.includes(query.value)) &&
  (!role.value || u.role === role.value)
))

const form = ref({ id: null, name: '', email: '', role: 'viewer', status: 'active' })
const editing = ref(false)

function resetForm(){ form.value = { id: null, name: '', email: '', role: 'viewer', status: 'active' }; editing.value=false }
function create(){
  const id = Math.max(0, ...allUsers.value.map(u=>u.id)) + 1
  allUsers.value.push({ ...form.value, id })
  resetForm()
}
function edit(user){ form.value = { ...user }; editing.value=true }
function update(){
  const idx = allUsers.value.findIndex(u=>u.id===form.value.id)
  if(idx>-1) allUsers.value[idx] = { ...form.value }
  resetForm()
}
function remove(id){ allUsers.value = allUsers.value.filter(u=>u.id!==id) }
</script>

<template>
  <div class="users">
    <div class="toolbar">
      <input v-model="query" class="input" placeholder="搜索姓名/邮箱" />
      <select v-model="role" class="input">
        <option value="">全部角色</option>
        <option value="admin">管理员</option>
        <option value="editor">编辑</option>
        <option value="viewer">访客</option>
      </select>
    </div>

    <div class="table">
      <div class="thead row">
        <div>ID</div><div>姓名</div><div>邮箱</div><div>角色</div><div>状态</div><div>操作</div>
      </div>
      <div v-for="u in users" :key="u.id" class="row">
        <div>{{ u.id }}</div>
        <div>{{ u.name }}</div>
        <div>{{ u.email }}</div>
        <div>{{ u.role }}</div>
        <div>
          <span :class="['badge', u.status==='active'?'green':'gray']">{{ u.status }}</span>
        </div>
        <div class="actions">
          <button class="btn" @click="edit(u)">编辑</button>
          <button class="btn danger" @click="remove(u.id)">删除</button>
        </div>
      </div>
    </div>

    <div class="editor">
      <h3>{{ editing ? '编辑用户' : '新增用户' }}</h3>
      <div class="form">
        <input v-model="form.name" class="input" placeholder="姓名" />
        <input v-model="form.email" class="input" placeholder="邮箱" />
        <select v-model="form.role" class="input">
          <option value="admin">管理员</option>
          <option value="editor">编辑</option>
          <option value="viewer">访客</option>
        </select>
        <select v-model="form.status" class="input">
          <option value="active">active</option>
          <option value="disabled">disabled</option>
        </select>
        <div class="form-actions">
          <button v-if="editing" class="btn primary" @click="update()">保存</button>
          <button v-else class="btn primary" @click="create()">创建</button>
          <button class="btn" @click="resetForm()">重置</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.users { display: grid; gap: 16px; }
.toolbar { display: flex; gap: 8px; }
.input { height: 36px; padding: 0 10px; border: 1px solid var(--color-border); border-radius: 8px; background: #fff; }

.table { background: #fff; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; }
.row { display: grid; grid-template-columns: 80px 1fr 1.5fr 1fr 1fr 1fr; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--color-border); align-items: center; }
.thead { background: #f8fafc; font-weight: 600; }
.actions { display: flex; gap: 8px; }
.badge { padding: 3px 8px; border-radius: 999px; font-size: 12px; }
.badge.green { background: #dcfce7; color: #15803d; }
.badge.gray { background: #e2e8f0; color: #334155; }

.editor { background: #fff; border: 1px solid var(--color-border); border-radius: 12px; padding: 16px; }
.form { display: grid; gap: 8px; grid-template-columns: repeat(4, 1fr); }
.form-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.btn { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--color-border); background: #fff; cursor: pointer; }
.btn.primary { background: #3b82f6; color: #fff; border-color: #3b82f6; }
.btn.danger { color: #dc2626; border-color: #fecaca; background: #fee2e2; }

@media (max-width: 900px){
  .row { grid-template-columns: 60px 1fr 1fr 1fr .8fr 1fr; }
  .form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .row { grid-template-columns: 50px 1fr; grid-auto-rows: auto; }
  .row > *:nth-child(n+3) { display: none; }
  .form { grid-template-columns: 1fr; }
}
</style>
